<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>双向绑定循环</title>
		<script type="text/javascript" src="js/knockout-3.4.0.js" ></script>
	</head>
	<body>
		<h1>双向绑定循环</h1>
		<div id="_bindDemo">
			框架数量<span data-bind="text: count"></span>
			<table border="1">
				<thead>
					<tr>
						<th>框架名称</th>
						<th>难度</th>
					</tr>
				</thead>
				<tbody data-bind="foreach: items">
					<tr>
						<td data-bind="text: framework"></td>
						<td data-bind="text: stars"></td>
					</tr>
				</tbody>
			</table>
		</div>
		<input type="button" value="修改" onclick="refreshData()"/>
	</body>
	<script type="text/jscript">
		var data = {
			count: ko.observable(2),
			items: ko.observableArray([
				{
					framework: 'Knockout',
					stars: 5 
				},
				{
					framework: 'JQuery',
					stars: 3
				}
			])
		};
		ko.applyBindings(data, document.getElementById('_bindDemo'));
		
		function refreshData(){
			data.count(3);	// 将个数修改成3
			// 将添加一个对象到items数组元素中，此时只是调用了数组的原生方法，ko并不知道数组变了
			data.items().push({framework: 'Underscore', stars: 1}); 
			// 通过ko创建的代理set方法重设数组
			data.items(data.items());
		}
	</script>
</html>
